import React from "react";
import styles from "./PlayerResult.less";

export function PlayerResult(props) {
  const { title, playerInfo } = props;
  const name = playerInfo?.name ?? playerInfo?.login;
  return (
    <div className={styles.wrap}>
      <h2 className="text-center">{title}</h2>
      <div>
        <img src={playerInfo.avatar_url} alt={playerInfo.login} />
      </div>
      <div className="text-center">
        <h3>Scores: {playerInfo.public_repos}</h3>
        <h2 className="text-primary">{name}</h2>
      </div>
      <div>
        <i className="fa fa-location-arrow" /> {playerInfo.location}
      </div>
      <div>
        <i className="fa fa-group" /> {playerInfo.followers}
      </div>
      <div>
        <i className="fa fa-user-plus" /> {playerInfo.following}
      </div>
      <div>
        <i className="fa fa-code" /> {playerInfo.public_repos}
      </div>
    </div>
  );
}

export default PlayerResult;
